<template>
    <div id="userGirl">
        <div class="top">
            <i class="icon iconfont" @click="goBack">&#xe72d;</i>
            <div class="msg">
                <div class="avator"></div>
                <div class="box">
                    <span class="shape"></span>
                    <h3>
                        <i class="iconfont">&#xe613;</i>
                        客服在线时间
                    </h3>
                    <p v-if="customer.working_day">工作日：{{customer.working_day[0].wd_begin}}:00-{{(customer.working_day)[0].wd_end}}:00</p>
                    <p v-if="customer.red_letter_day">节假日：{{(customer.red_letter_day)[0].re_begin}}:00-{{(customer.red_letter_day)[0].re_end}}:00</p>
                </div>
            </div>
        </div>
        <div class="main-box">
            <div class="qq-block">
                <div class="left">
                    <i class="icon kefu-icon"></i>
                    <p>美女客服</p>
                    <p class="number">{{customer.qq_number}}</p>
                    <button id="onlineService">
                        <a href="javascript:;">交谈</a>
                    </button>
                </div>
                <div class="right">
                    <i class="icon qq-icon"></i>
                    <p>QQ群</p>
                    <p class="number">{{customer.qq_group}}</p>
                    <button @click="join">
                        <a target="_blank">
                            加入
                        </a>
                    </button>
                </div>
            </div>
            <div class="weixin-block">
                <i class="icon weixin-icon"></i>
                <p>微信公众号</p>
                <img :src="customer.wechat_public" alt="" v-if="customer.wechat_public">
            </div>
        </div>
    </div>
</template>

<script>
    import {customerService} from 'api/game_box'
    import {logStatus} from 'api/login'
    import { mapState} from 'vuex'
    import { Toast } from 'vant'
    export default {
        data(){
            return{
                customer:[],
                qq_number:'',
                webkey:"",
                agent:''
            }
        },
        created(){
            let agent=this.loginInfo.agent;
            if(agent){
                this.agent=agent;
            }else{
                this.agent="default";
            }
            this.init();
        },
        computed:{
            ...mapState(['loginInfo'])
        },
        methods:{
            init(){
                customerService(this.agent).then(res=>{
                    if(res.data.error==0){
                        this.customer=res.data.content;
                        this.qq_number=this.customer.qq_number;
                        this.webkey=this.customer.web_key;
                    }
                })
            },
            join(){
                if(this.webkey){
                    window.location.href=`//shang.qq.com/wpa/qunwpa?idkey=${this.webkey}`;
                }else{
                    Toast("缺少必要参数webkey")
                }
            },
            goBack(){
                this.$router.go(-1);
            }
        },
        mounted(){
            setTimeout(()=>{
                BizQQWPA.addCustom({
                    aty: 0,
                    nameAccount: this.qq_number,
                    selector: 'onlineService'
                })
            },500)
        }
    }
</script>

<style scoped lang="scss">
    @import '~styles/variable.scss';
    @import '~styles/mixins.scss';
    #userGirl{
        width: 7.5rem;
        margin:0 auto;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #f4f4f4;
        overflow:scroll;
        .top{
            position:relative;
            display:flex;
            justify-content: center;
            width:100%;
            height:3.8rem;
            background-size:100% 100%;
            background-image:url('../../assets/image/userGirl_bg.png');
            .icon{
                position:absolute;
                top:0;
                left:0.2rem;
                line-height:0.8rem;
                font-size:0.4rem;
                color:#fff;
            }
            .msg{
                margin-top:0.3rem;
                .avator{
                     width:1.1rem;
                     height:1.1rem;
                     margin:0 auto;
                     background-size:100% 100%;
                     @include bg-image('../../assets/image/icon_kftx');
                }
                .box{
                    position:relative;
                    margin-top:0.3rem;
                    width:4.6rem;
                    height:1.3rem;
                    padding:0.1rem 0;
                    background:#48a8b1;
                    border-radius:5px;
                    .shape{
                        position: absolute;
                        top:-18px;
                        left:50%;
                        transform:translateX(-50%);
                        height: 0px;
                        width: 0px;
                        border:8px solid transparent;
                        border-bottom: 10px solid #48a8b1;
                    }
                    h3{
                        font-size:$font-size-l;
                        color:#fff;
                        text-align: center;
                        i{
                            margin-right:0.05rem;
                            font-size:0.4rem;
                            vertical-align: middle;
                        }
                    }
                    p{
                        text-align: center;
                        color:#fff;
                    }
                }
            }
        }
        .main-box{
            position:relative;
            top:-0.57rem;
            z-index:999;
            width:7rem;
            height:9.4rem;
            margin:0 auto;
            background:#fff;
            .qq-block{
                display:flex;
                width:100%;
                height:4.35rem;
                padding:0.56rem 0 0.45rem 0;
                border-bottom:1px solid #ececec;
                .right,.left{
                    flex:1;
                    display:flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    p{
                        line-height:0.4rem;
                    }
                    .number{
                        margin-top:0.15rem;
                        padding-top:0.2rem;
                        border-top:1px solid #ececec;
                        color:#00a2ff;
                    }
                    button{
                        margin-top:0.76rem;
                        width:2rem;
                        height:0.5rem;
                        background:#ffc21c;
                        color:#fff;
                        text-align:center;
                        border:none;
                        border-radius:0.25rem;
                        font-size:$font-size-m;
                        a{
                            color:#fff;
                        }
                    }
                }
                .left{
                    border-right:1px solid #ececec;
                }
            }
            .weixin-block{
                display:flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding-top:0.5rem;
                img{
                    width:1.8rem;
                    height:1.75rem;
                }
                p{
                    line-height:0.4rem;
                }
                button{
                    margin-top:0.4rem;
                    width:2rem;
                    height:0.5rem;
                    background:#00d8cc;
                    color:#fff;
                    text-align:center;
                    border:none;
                    border-radius:0.25rem;
                    font-size:$font-size-m;
                    a{
                        color:#fff;
                    }
                }
            }
            .icon{
                display:block;
                margin-bottom:0.1rem;
                width:0.9rem;
                height:0.9rem;
                background-size:100% 100%;
                &.kefu-icon{
                    @include bg-image('../../assets/image/icon_mnkf');
                }
                &.qq-icon{
                    @include bg-image('../../assets/image/icon_qq');
                }
                &.weixin-icon{
                     @include bg-image('../../assets/image/icon_weixin');
                }
            }
        }
    }
</style>